// ----------初始化剪裁框-----------
let image = $('#image');
let option = {
    aspectRatio: 1,
    preview: '.img-preview'
}

image.cropper(option);

// ----------点击上传，能够触发文件域单击事件-----------
// button:contains("标签的内容")--------查找包含“内容”的标签
$('button:contains("上传")').on('click', function() {
    $('#file').trigger('click');
})

// ----------更换剪裁区的图片-----------
$('#file').on('change', function() {
    // console.dir(this);
    if (this.files.length > 0) {
        let fileObj = this.files[0];
        let url = URL.createObjectURL(fileObj);
        image.cropper('replace', url);
    }
})

// ----------点击确定，剪裁图片，提交给接口-----------
$('button:contains("确定")').on('click', function() {
    // 1. 剪裁图片-->得到canvas(H5的画布)
    let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
    // 2. 把canvas转换为base64格式(因为接口需要base64格式)
    let base64 = canvas.toDataURL(); //原生的方法
    // 3. 按照接口要求提交
    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: { avatar: base64 },
        success: function(res) {
            if (res.status === 0) {
                layer.msg(res.message);
                window.parent.getUserInfo(); // 调用父页面的方法
            }
        }
    })
})